<template>
  <div class="industry-edit">
    <div class="header">
      <svg-icon name="back" class="back-btn" @click="back" />
    </div>

    <div class="industry-main">
      <van-form @submit="onSubmit">
        <van-cell-group class="!mb-[1.2rem]">
          <van-field
            v-model="reportForm.reportTitle"
            placeholder="请输入报告标题"
          />
        </van-cell-group>

        <van-cell-group class="!mb-[1.2rem]">
          <van-field name="uploader">
            <template #input>
              <div>
                <ImageUpload v-model="reportForm.coverImage" />
              </div>
            </template>
          </van-field>
        </van-cell-group>

        <van-cell-group class="!mb-[1.2rem]">
          <van-field
            v-model="reportForm.reportDate"
            is-link
            readonly
            name="datePicker"
            label="报告时间"
            placeholder="点击选择时间"
            @click="showPicker = true"
          />
          <DateTime
            :values="reportForm.reportDate"
            @changeValue="showPicker = false"
            :showPicker="showPicker"
            @confirm="onConfirm"
          />
        </van-cell-group>

        <van-cell-group v-if="isOriginal === 'Y'">
          <van-field name="uploader">
            <template #input>
              <div>
                <Editor v-model="reportForm.reportContent" :min-height="192" />
              </div>
            </template>
          </van-field>
        </van-cell-group>

        <div class="title">报告标签</div>

        <div class="sign-box">
          <div
            class="sign-item"
            v-for="(item, index) of labelsData"
            :key="index"
          >
            {{ item.labels }}
          </div>

          <div class="sign-item add" @click="addItem">添加标签</div>
        </div>

        <van-cell-group class="!mb-[1.2rem]" v-if="isOriginal === 'N'">
          <van-field name="uploader">
            <template #input>
              <div>
                <FileUpload
                  :max="20"
                  :file-list="reportAnnexList"
                  @success="uploadFile"
                />
              </div>
            </template>
          </van-field>
        </van-cell-group>

        <div class="submit-btn">
          <van-button
            block
            type="primary"
            native-type="submit"
            color="linear-gradient(to right, #ffadb3, #ff4350)"
          >
            发布
          </van-button>
        </div>
      </van-form>
    </div>

    <van-popup
      v-model:show="showSign"
      round
      position="bottom"
      :style="{ maxHeight: '50%', overflow: 'auto' }"
    >
      <van-checkbox-group
        v-model="reportForm.labelsData"
        shape="square"
        class="sign-checkbox"
      >
        <van-checkbox
          v-for="(item, index) of reportLabelsData"
          :key="index"
          :name="item.id"
          >{{ item.labels }}</van-checkbox
        >
      </van-checkbox-group>
    </van-popup>
  </div>
</template>

<script setup lang="ts" name="IndustryAddOrEdit">
import { computed, onMounted, ref } from "vue";
import ImageUpload from "@/components/imageUpload/index.vue";
import FileUpload from "@/components/fileUpload/index.vue";
import Editor from "@/components/Editor/index.vue";
import { useRoute, useRouter } from "vue-router";
import { addReport, updateReport } from "@/views/industryReport/fetchData";
import DateTime from "@/components/DateTime/index.vue";

const props = defineProps({
  reportDetail: {
    type: Object,
    default: () => {}
  },
  reportLabelsData: {
    type: Array as any,
    default: () => []
  }
});
const emits = defineEmits(["update", "close"]);
const route = useRoute();
const router = useRouter();
const isOriginal = route.query.isOriginal as string;
const initForm = () => {
  return {
    id: "",
    reportTitle: "",
    labelsData: [],
    reportLabels: "",
    reportContent: "",
    reportDate: "",
    reportAnnex: "",
    coverImage: "",
    isOriginal: isOriginal
  };
};
const reportForm = ref<Record<string, any>>(initForm());
const showPicker = ref(false);
const reportAnnexList = ref<string[]>([]);
const showSign = ref(false);
const labelsData = computed(() => {
  return props.reportLabelsData?.filter((item: any) =>
    reportForm.value.labelsData.includes(item.id)
  );
});

function back() {
  if (!route.query.id) {
    router.back();
  } else {
    emits("close");
  }
}
function onConfirm(selectedValues: string) {
  reportForm.value.reportDate = selectedValues;
  showPicker.value = false;
}

function addItem() {
  showSign.value = true;
}

function uploadFile(arr: string[]) {
  reportForm.value.reportAnnex = arr.join(",");
}

function onSubmit() {
  reportForm.value.reportLabels = labelsData.value
    .map((item: any) => item.id)
    .join(",");
  if (reportForm.value.id) {
    updateReport(reportForm.value).then((res: any) => {
      if (+res.code === 200) {
        emits("update");
      }
    });
  } else {
    addReport(reportForm.value).then((res: any) => {
      if (+res.code === 200) {
        if (route.query.id) {
          emits("update");
        } else {
          router.push('industryReport');
        }
      }
    });
  }
}

function getDetail() {
  const data = JSON.parse(JSON.stringify(props.reportDetail));
  reportForm.value = data?.id ? data : initForm();
  reportForm.value.labelsData = reportForm.value.reportLabels
    ? reportForm.value.reportLabels.split(",")
    : [];
  reportAnnexList.value = data.reportAnnex ? data.reportAnnex.split(",") : [];
  console.log("88", reportForm.value.labelsData);
}

onMounted(() => {
  getDetail();
});
</script>

<style scoped lang="less">
.industry-edit {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f3f4fa;

  .header {
    display: flex;
    align-items: center;
    height: 4rem;
    margin-bottom: 1rem;
    padding: 0 1rem;
    background-color: #fff;
    border-radius: 0 0 1rem 1rem;

    .back-btn {
      width: 2rem;
      height: 2rem;
    }
  }

  .industry-main {
    flex: 1;
    height: 0;
    padding: 0 1rem 1rem;
    overflow: auto;

    .van-cell-group,
    .van-cell {
      border-radius: 0.6rem;
    }

    .title {
      margin: 1rem 0;
    }

    .sign-box {
      display: flex;
      flex-wrap: wrap;

      .sign-item {
        position: relative;
        margin-right: 1rem;
        margin-bottom: 1rem;
        padding: 0.5rem 1.5rem;
        border-radius: 2rem;
        background-color: #fff;

        &.add {
          position: relative;
          padding-left: 2.1rem;
          color: #ff4350;

          &::before {
            position: absolute;
            top: 50%;
            left: 1rem;
            transform: translateY(-50%);
            content: "";
            width: 0.8rem;
            height: 0.8rem;
            background: url("./assets/add-sign.png") no-repeat center;
            background-size: contain;
          }
        }
      }
    }

    .submit-btn {
      margin-top: 1rem;
    }
  }

  .sign-checkbox {
    padding: 1rem 1rem 0.5rem 2.2rem;

    .van-checkbox {
      margin-bottom: 1rem;
    }
  }
}
</style>
